<template>
	<view class="page-body">
		<view class="index-header">
			<view class="index-header-v">
				<image class="test1" src="../../static/home/conent/列表选择.png"></image>
				<text>爽淘淘-淘宝优惠卷</text>
				<image @click="showQRclickEvnet" class="test1" src="../../static/home/conent/二维码.png"></image>
			</view>
		</view>
		<view class="index-swiper">
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper
							class="swiper"
							:circular="true"
							indicator-active-color="#FFF"
							indicator-dots="true"
							:indicator-dots="indicatorDots"
							:autoplay="autoplay"
							:interval="interval"
							:duration="duration"
						>
							<swiper-item>
								<view class="swiper-item uni-bg-red">
									<image src="https://gju1.alicdn.com/tps/i3/6000000004433/O1CN01i5IVx61icMKigMiut_!!6000000004433-0-jupush.jpg" mode=""></image>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item uni-bg-green">
									<image src="https://gju4.alicdn.com/tps/i3/6000000002223/O1CN01eMAxfs1SIB1gnSjTL_!!6000000002223-0-jupush.jpg" mode=""></image>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item uni-bg-blue">
									<image src="https://gju1.alicdn.com/tps/i3/6000000004433/O1CN01i5IVx61icMKigMiut_!!6000000004433-0-jupush.jpg" mode=""></image>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
		<view class="index-input">
			<input type="text" v-model="inputCotent" placeholder="输入关键词搜索优惠券商品..." />
			<image @click="goSecondSearchClick" src="../../static/home/conent/搜索.png" mode=""></image>
		</view>
		<view class="index-type">
			<ul>
				<li v-for="(i, idx) in setType" :key="idx" @click="changeGoodesEvent(i.material_id)">
					<image :src="i.name | getImgFil"></image>
					<text>{{ i.name | getTypeTextFil }}</text>
				</li>
			</ul>
		</view>
		<!-- tabs组件 -->
		<view class="index-tabs"><mstabs :tabData="testData" @tabClick="aplayModuler"></mstabs></view>
		<view class="index-showimte"><goodsitem :goodesList="goodesList" :isInfoShow="true"></goodsitem></view>

		<!-- 	<view class="index-upbox" v-show="isTopEvent">
			<view class="index-up-code"><image src="../../static/home/conent/二维码%20(1).png" mode=""></image></view>
			<view class="index-up-click" @click="backTopClcikEvent"><image src="../../static/home/conent/上箭头.png" mode=""></image></view>
		</view> -->
		<!-- <view class="index-visc-search" v-show="isTopEvent">
			<image src="../../static/home/conent/二维码.png" mode=""></image>
			<view class="index-visc-input"><input type="text" value="" placeholder="搜索商品优惠卷" /></view>
			<view class="index-viec-right"><image src="../../static/home/conent/搜索.png" mode=""></image></view>
		</view> -->
		<!-- 点击向上 -->
		<!-- 二维码展示 -->
		<view class="item-info-imgup" @click="cloceShowQRclickEvent" v-show="showQR"><image :src="QRcode" mode=""></image></view>

		<view><click-up v-show="isTopEvent"></click-up></view>

		<!-- 搜索 -->
		<view><goode-search v-show="isTopEvent"></goode-search></view>
	</view>
</template>

<script>
// 引入组件 tabs组件
import mstabs from '../../components/liuyuno-tabs/liuyuno-tabs.vue';
//商品item组件
import goodsitem from '../../components/goods-item/goodsItem.vue';

//引入点击向上组件
import clickUp from '../../components/click-up/click-up.vue';

// 引入搜索组件
import goodeSearch from '../../components/goods-search/itemSearch.vue';

//vuex映射
import { mapState, mapActions, mapMutations } from 'vuex';
//引入混入项
import loadMore_Mix from '../../mixins/loadMore_Mix.js';

//引入二维码生成工具
import QR from '../../tools/wxqrcode.js';
export default {
	data() {
		return {
			// 二维码
			QRcode: '',
			showQR: false,

			title: 'Hello',
			/*以下为轮播图属性*/
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			/*以上为轮播图属性*/

			//搜索输入内容
			inputCotent: '',

			//tabs
			testData: ['默认排序', '优惠券', '销量', '价格'],
			//第几个标签
			active: 0,
			//type类型数据
			homeTypeData: [],

			//是否默认渲染
			isShowItemDefault: true,
			//当前渲染类型
			presentShowItemType: '',
			//加载更多时使用的url
			loadMoreUrl: 'http://127.0.0.1:3000/command?',

			//是否为顶部
			isTopEvent: false
		};
	},
	mixins: [loadMore_Mix],
	components: {
		mstabs,
		goodsitem,
		goodeSearch,
		clickUp
	},
	onPageScroll(v) {
		console.log(v.scrollTop)
		if (v.scrollTop > 600) {
			this.isTopEvent = true;
		} else {
			this.isTopEvent = false;
		}
	},
	//触发到底部事件
	onReachBottom() {
		this.onScroll();
	},
	onLoad() {},
	// 计算
	computed: {
		...mapState({
			setType: state => state.home_idx.goodesType,
			goodesList: state => state.home_idx.goodesList
		})
	},

	mounted() {
		//调用仓库中映射的种类函数
		this.getGoodesType().then(data => {});
		//渲染默认
		this.reqHomeGoodesList(this.active).then(data => {
			// console.log(data);
		});
	},
	methods: {
		//生成二维码
		showQRclickEvnet() {
			let img = QR.createQrCodeImg(`http://localhost:8080/#/`, {
				size: parseInt(200)
			});
			console.log('点击了');
			this.QRcode = img;
			console.log(img);
			this.showQR = true;
		},
		//关闭
		cloceShowQRclickEvent() {
			this.showQR = false;
		},
		...mapActions(['getGoodesType', 'reqHomeGoodesList', 'reqHomeGoodesTypeList', 'reqLoadMoreList', 'reqSearchItemList']),
		//以下为轮播图方法
		changeIndicatorDots(e) {
			this.indicatorDots = !this.indicatorDots;
		},
		changeAutoplay(e) {
			this.autoplay = !this.autoplay;
		},
		intervalChange(e) {
			this.interval = e.target.value;
		},
		durationChange(e) {
			this.duration = e.target.value;
		},
		//以上为轮播图方法

		//渲染方式方法
		aplayModuler(v) {
			this.active = v;
			if (this.isShowItemDefault) {
				this.reqHomeGoodesList(this.active).then(data => {
					// console.log(data);
				});
				return;
			}
			this.reqHomeGoodesTypeList({ idx: this.presentShowItemType, active: this.active });
		},

		//更换渲染内容事件
		changeGoodesEvent(v) {
			this.isShowItemDefault = false;
			this.presentShowItemType = v;
			this.loadMoreUrl = `http://127.0.0.1:3000/hot?material_id=${v}`;
			this.reqHomeGoodesTypeList({ idx: v, active: this.active });
		},

		//跳转去搜索页面
		goSecondSearchClick() {
			uni.navigateTo({
				url: `/pages/second-pages/search-content?searInput=${this.inputCotent}`
			});
			// 输入框置空
			this.inputCotent = '';
		}
	},

	filters: {
		getImgFil(v) {
			return `../../static/home/goodsType/${v}.png`;
		},
		getTypeTextFil(v) {
			switch (v) {
				case '女装':
					return '女装';
				case '家居家装':
					return '日用';
				case '数码家电':
					return '数码';
				case '鞋包配饰':
					return '鞋品';
				case '美妆个护':
					return '美妆';
				case '男装':
					return '男装';
				case '内衣':
					return '内衣';
				case '母婴':
					return '母婴';
				case '食品':
					return '美食';
				case '运动户外':
					return '运动';
				default:
					return '';
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
.item-info-imgup {
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000000000000;
	//生成出的图片
	& > image {
		width: 400rpx;
		height: 400rpx;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: block;
		position: absolute;
		margin: auto;
	}
}
</style>
